<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <i class="fa fa-angle-left" @click="goback"></i>
      <p>Elio</p>
    </header>
    <div class="chat-container">
      <div class="chat-messages">

        <div class="ai-message-start">
          <div class="avatar-start">
            <img src="../assets/ai.jpg" alt="AI Avatar"/>
          </div>
          <div class="message-content-start">
            <p>
              嗨，我是你的饿了么小伙伴，Elio！无论你想订购美味的食物、了解最新的促销信息，还是需要餐厅建议，我都在这里帮助你。只需告诉我你的需求，我将尽力为你提供最好的服务。让我们一起开启美食之旅吧！</p>
          </div>
        </div>

        <div v-for="message in messages" :key="message.id" class="chat-message">
          <div v-if="message.type === 'user'" class="user-message">
            <div class="message-content">
              <p>{{ message.content }}</p>
            </div>
            <div class="avatar">
              <img :src="user && user.userImg ? user.userImg : '../assets/default_user.jpg'" alt="User Avatar"/>
            </div>
          </div>

          <div v-else-if="message.type === 'ai'" class="ai-message">
            <div class="avatar">
              <img src="../assets/ai.jpg" alt="AI Avatar"/>
            </div>
            <div class="message-content">
              <p>{{ message.content }}</p>
            </div>
          </div>

        </div>

      </div>
      <div class="chat-input-container">
        <div class="chat-input">
          <input v-model="userInput" @keydown.enter="sendMessage" type="text" placeholder="快来和Elio聊天吧..."/>
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '',
      messages: [],
      user: {}
    };
  },
  created() {
    this.user = this.$getSessionStorage('user');
  },
  methods: {
    sendMessage() {
      const userMessage = {
        id: Date.now(),
        type: 'user',
        content: this.userInput
      };
      this.messages.push(userMessage);
      this.userInput = '';

      const requestData = {
        prompt: userMessage.content // 使用用户输入的内容
      };

      this.$axios
          .get('http://localhost:8080/elm/GPTController/getGPTResponse', {params: requestData})
          .then(response => {
            const aiResponse = response.data;

            if (aiResponse) {
              const aiMessage = {
                id: Date.now(),
                type: 'ai',
                content: aiResponse
              };
              this.messages.push(aiMessage);
            } else {
              console.warn('AI response is null');
            }
          })
          .catch(error => {
            console.error(error);
          });
    },
    goback() {
      this.$router.go(-1);
    },
  }
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  background: radial-gradient(#FADBD8, #ffffff);
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;

}

.wrapper header i {
  margin-left: 6vw;
}

.wrapper header p {
  margin-left: 38vw;
  letter-spacing: 2px;
}
/****************** AI部分 ******************/
.wrapper .chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100% - 12vw); /* 使用calc()计算高度 */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12vw;
}

/****************** AI开始部分 ******************/
.wrapper .chat-container .chat-messages .ai-message-start {
  padding-top: 6px;
  padding-right: 20px;
  margin-left: 6px;
  border-radius: 4px;
  display: flex; /* 修改为flex布局 */
  align-items: center;
}

.wrapper .chat-container .chat-messages .ai-message-start .avatar-start {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 13px;
  flex-shrink: 0; /* 添加flex-shrink属性 */
  margin-left: 7px;
}

.wrapper .chat-container .chat-messages .ai-message-start .message-content-start {
  background: linear-gradient(to left, rgba(235, 222, 240, 100%), rgba(255, 255, 255, 0.5));
  flex-grow: 1;
  word-break: break-word; /* 添加word-break属性 */
  padding-bottom: 3vw;
}

.wrapper .chat-container .chat-messages .ai-message-start .message-content-start p {
  margin: 4vw 2vw 4vw 6vw;
  color: #666666;
  letter-spacing: 2px; /* 调整字体间距的数值 */
}

.wrapper .chat-container .chat-messages .ai-message-start img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/****************** AI对话部分 ******************/
.wrapper .chat-messages {
  flex-grow: 1;
  padding: 10px;
  overflow-y: scroll;
}

.wrapper .chat-message {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 9px;
}

.wrapper .user-message .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0; /* 添加flex-shrink属性 */
  margin-left: 3vw;

}

.wrapper .user-message .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper .ai-message .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 13px;
  flex-shrink: 0; /* 添加flex-shrink属性 */
  margin-left: 7px;

}

.wrapper .ai-message .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper .user-message {
//background: linear-gradient(rgba(241, 148, 138, 30%), rgba(255, 255, 255, 0.5)); //background: rgba(255, 255, 255, 0.3); //padding: 18px; padding-top: 6px;
  padding-left: 26px;
  border-radius: 4px;
  display: flex; /* 修改为flex布局 */
  align-items: center;

}

.wrapper .ai-message {
//background: linear-gradient(rgba(235, 222, 240, 100%), rgba(255, 255, 255, 0.5)); //padding: 8px; padding-top: 6px;
  padding-right: 26px;
  margin-left: 6px;
  border-radius: 4px;
  display: flex; /* 修改为flex布局 */
  align-items: center;
}

.wrapper .ai-message .message-content {
  background: linear-gradient(to left, rgba(235, 222, 240, 100%), rgba(255, 255, 255, 0.5));
  flex-grow: 1;
  word-break: break-word; /* 添加word-break属性 */
  padding-bottom: 3vw;
}

.wrapper .user-message .message-content {
  background: linear-gradient(to right, rgba(241, 148, 138, 30%), rgba(255, 255, 255, 0.5));
  flex-grow: 1;
  word-break: break-word; /* 添加word-break属性 */
  padding-bottom: 3vw;
  border-radius: 5px;
}

.wrapper .user-message .message-content p {
  margin: 4vw 2vw 2vw 3vw;
  color: #666666;
  letter-spacing: 2px; /* 调整字体间距的数值 */
}

.wrapper .ai-message .message-content p {
  margin: 2vw 2vw 2vw 3vw;
  color: #666666;
  letter-spacing: 2px; /* 调整字体间距的数值 */
}

.wrapper .chat-input-container {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 将输入框容器底部对齐 */
  padding: 10px;
  height: 60px;
}

.wrapper .chat-input {
  display: flex;
  align-items: center;
  max-width: 600px;
}

.wrapper .chat-input input {
  width: 70vw;
  height: 7vw;
  flex-grow: 1;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.wrapper .chat-input button {
  height: 11vw;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #EF9292;
  border: 1px solid #ccc;
  color: #fff;
}
</style>

